<template>
  <div>
    <el-card class="mb-10">
      <CategorySelector :disabled="false"></CategorySelector>
    </el-card>

    <el-card>
      <!-- <SpuList v-if="(showStatus == STATUS.SPULIST)" @updateShowStatus="updateShowStatus"></SpuList>
      <SpuForm v-if="(showStatus == STATUS.SPUFORM)" @updateShowStatus="updateShowStatus"></SpuForm>
      <SkuForm v-if="(showStatus == STATUS.SKUFORM)" @updateShowStatus="updateShowStatus"></SkuForm> -->

       <!-- 
        vue3 中的 v-model
        :modelValue 和 @update:modelValue -- v-model:modelValue 可以简写 v-model
        :xxx 和 @update:xxx

        v-model 相当于是在组件标签上写了两个部分
        <Child :modelValue=""  @update:modelValue=""> 等价于 <Child v-model="">
        使用v-bind传参给组件是为了让组件接收这个数据进行展示呢,而我们这里子组件不需要展示这个数据,所以不接这个数据也可以
        组件上绑定归绑定,但组件内部不展示这个数据,我可以不接收
      -->

      <SpuList v-if="(showStatus == STATUS.SPULIST)" v-model="showStatus" @changeSpuInfo="changeSpuInfo"></SpuList>
      <SpuForm v-if="(showStatus == STATUS.SPUFORM)" v-model="showStatus" :spuInfo="spuInfo" @changeSpuInfo="changeSpuInfo"></SpuForm>
      <SkuForm v-if="(showStatus == STATUS.SKUFORM)" v-model="showStatus" :spuInfo="spuInfo" @chnageSpuInfo="changeSpuInfo"></SkuForm>
    </el-card>
  </div>
</template>

<script lang="ts">
 export enum STATUS {
  SPULIST = 1,  // 1是展示SpuLIst
  SPUFORM = 2,  // 2是展示 SpuForm
  SKUFORM = 3   // 3是展示SkuForm
 }
</script>

<script setup lang="ts">
import SpuList from './components/SpuList/index.vue'
import SpuForm from './components/SpuForm/index.vue'
import SkuForm from './components/SkuForm/index.vue'
import { ref } from 'vue';
import type { SpuModel } from '@/api/spu';
// 通过 showStatus 控制三个界面的切换
const showStatus = ref(1);  // 1 是SpuList展示  2是SpuForm展示  3是 SkuForm展示

// 子组件触发自定义事件,修改界面展示状态
const updateShowStatus = (status: number) => {
  showStatus.value = status;
}

const initSpuInfo = ():SpuModel=>({
    spuName: '',
    description: '',
    category3Id: undefined,
    tmId: undefined ,
    spuSaleAttrList: [],  // 销售属性列表
    spuImageList: []  
})


// 
const spuInfo = ref<SpuModel>(initSpuInfo())
const changeSpuInfo = (row?:SpuModel)=>{
  spuInfo.value = row ? row :initSpuInfo()
}
</script>

<style scoped>

</style>